Element

2023-08-14 16:20| 来源: 网络整理| 查看: 265

把加载的数据存放到一个有滚动条的盒子里，因为这个功能主要是根据滚动条滑到最底部进行加载，反之就会出现一直加载，直到数据加载完毕为止。infinite-scroll-immediate 是否立即执行加载方法，以防初始状态下内容无法撑满容器。默认为是，记得选否。

(vant 滚动加载+下拉刷新，改变筛选条件时重新渲染数据，容易出现重复加载，:immediate-check="false"是否在初始化时立即执行滚动位置检查关掉，手动onLoad();记得onLoad的时候把this.loading=false;this.finished=false;)

没有更多了

export default { data() { return { count: 0,//起始页数值为0 loading: false, totalPages: "",//取后端返回内容的总页数 list: [] //后端返回的数组 }; }, computed: { noMore() { //当起始页数大于总页数时停止加载 return this.count >= this.totalPages - 1; }, disabled() { return this.loading || this.noMore; } }, created() { this.getMessage(); }, methods: { load() { //滑到底部时进行加载 this.loading = true; setTimeout(() => { this.count += 1; //页数+1 this.getMessage(); //调用接口，此时页数+1，查询下一页数据 }, 2000); }, getMessage() { let params = { pageNumber: this.count, pageSize: 10 //每页查询条数 }; this.$axios .post( "https://接口", params ) .then(res => { console.log(res); this.list = this.list.concat(res.data.body.content); //因为每次后端返回的都是数组，所以这边把数组拼接到一起 this.totalPages = res.data.body.totalPages; this.loading = false; }) .catch(err => { console.log(err); }); } } }; #box{ width: 100%; height: 100%; position: absolute; overflow-y: auto; } .box { width: 100%; margin: 0 auto; } .list { padding: 0; font-size: 14px; } .list-item { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; list-style: none; padding: 0 1rem; box-sizing: border-box; height: 70px; line-height: 70px; border-bottom: 1px solid #e7e7e7; } .loading span { display: inline-block; width: 20px; height: 20px; border: 2px solid #409eff; border-left: transparent; animation: zhuan 0.5s linear infinite; border-radius: 50%; } @keyframes zhuan { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

【本文地址】

公司简介

联系我们